<template>
    <div class="SSZZ">
        <header>
            <van-nav-bar
            title="我的找货"
            left-arrow
            />
            <van-search
            v-model="value"
            placeholder="请输入搜索关键词"
            show-action
            shape="round"
            
            >
            
            <div slot="action" >搜索</div>
            </van-search>
            <van-icon name="clear" class="SXX"/>
            <div class="Syhj1">
                    <div class="SZP">图片</div>
                    <div class="SZP1">
                        <ul>
                            <li><p>手提包</p></li>
                            <li>98新迈克高仕红色牛皮女士</li>
                            <li>手提包</li>
                            <li>$200-300</li>
                        </ul>
                    </div>
                    <div class="SSY">咨询订购</div>
                </div>
                <div class="S2yhj1">
                    <div class="S2ZP">图片</div>
                    <div class="S2ZP1">
                        <ul>
                            <li><p>Gucci 手提单肩包</p></li>
                            <li>98新古驰女士单肩包</li>
                            <li>$300</li>
                        </ul>
                    </div>
                    <div class="S2SY">咨询订购</div>
                </div>
                <div class="S3yhj1">
                    <div class="S3ZP">图片</div>
                    <div class="S3ZP1">
                        <ul>
                            <li><p>LV 手提包</p></li>
                            <li>9新LV红色漆皮女士两用包</li>
                            <li>$4000</li>
                        </ul>
                    </div>
                    <div class="S3SY">咨询订购</div>
                </div>
                <div class="S3yhj1">
                    <div class="S3ZP">图片</div>
                    <div class="S3ZP1">
                        <ul>
                            <li><p>coco女士单肩包</p></li>
                            <li>99新菲拉格慕女士单肩包</li>
                            <li>$400</li>
                        </ul>
                    </div>
                    <div class="S3SY">咨询订购</div>
                </div>
        </header>

        <section>
             
            
        </section>

        <footer>
            
        </footer>
    </div>
</template>

<script>
export default {
  data() {
    return {
        checked: '',
        value:''
    };
  },
  methods:{
      
  }

}

</script>


<style scoped>
*{
    margin: 0;
    padding: 0;
}
.SSZZ{
    display: flex;
    height: 100vh;
    flex-direction: column;
    font-size: 0.12rem;
}
.SSZZ .van-search__content--round{
    background: #ccc;
}
.SSZZ .van-icon-search:before{
    display: none;
}
.SSZZ .SXX{
    font-size: 0.4rem;
    margin-left: 5.7rem;
    margin-top: -0.85rem;
    display: block;
    z-index: 1;
}
.SSZZ .Syhj1,.S2yhj1,.S3yhj1{
    height: 2.5rem;
}
.SSZZ .Syhj1 .SZP{
    width: 1rem;
    height: 1rem;
    border: 1px solid #ccc;
    margin: 1rem 0 0 0.5rem;
    float: left;

}
.SSZZ .S2yhj1 .S2ZP{
    width: 1rem;
    height: 1rem;
    border: 1px solid #ccc;
    margin-top: 1rem;
    float: left;
    margin-left: 0.5rem;

}
.SSZZ .S3yhj1 .S3ZP{
    width: 1rem;
    height: 1rem;
    border: 1px solid #ccc;
    margin-top: 1rem;
    float: left;
    margin-left: 0.58rem;
}
.SSZZ .Syhj1 .SZP1{
    width: 3rem;
    height: 2rem;
    float: left;
    margin-top: 0.5rem;
    margin-left: 0.4rem
}
.SSZZ .Syhj1 .SZP2{
    width: 3rem;
    height: 1.5rem;
    float: left;
    margin-top: 0.3rem;
    margin-left: 0.9rem;
}
.SSZZ .S2yhj1 .S2ZP1{
    width: 3rem;
    height: 2rem;
    float: left;
    margin-top: 0.5rem;
    margin-left: 0.5rem
}
.SSZZ .S2yhj1 .S2ZP2{
    width: 3rem;
    height: 1.5rem;
    float: left;
    margin-top: 0.3rem;
    margin-left: 0.5rem
}
.SSZZ .S3yhj1 .S3ZP1{
    width: 3rem;
    height: 1.5rem;
    float: left;
    margin-top: 0.3rem;
    margin-left: 0.42rem;
}
.SSZZ .Syhj1 .SZP1 li{
    float: left;
    margin-left: 0.4rem;
    margin-top: 0.25rem;
    font-size: 0.26rem;
}
.SSZZ .Syhj1 .SZP2 li{
    float: left;
    margin-top: 0.25rem;
    font-size: 0.26rem;
}

.SSZZ .S2yhj1 .S2ZP1 li{
    float: left;
    margin-left: 0.4rem;
    margin-top: 0.25rem;
    font-size: 0.26rem;
}
.SSZZ .S2yhj1 .S2ZP2 li{
    float: left;
    margin-left: 0.4rem;
    margin-top: 0.25rem;
    font-size: 0.26rem;
}
.SSZZ .S3yhj1 .S3ZP1 li{
    float: left;
    margin-left: 0.4rem;
    margin-top: 0.25rem;
    font-size: 0.26rem;
}
.SSZZ .Syhj1 .SSY{
    margin-left: 0.7rem ;
    width: 1rem;
    height: 0.4rem;
    border:1px solid #ccc;
    float: left; 
    text-align: center;
    border-radius: 20%;
    line-height: 0.4rem;
    margin-top: 2rem;
}
.SSZZ .S2SY{
    margin-left: 0.7rem;
    width: 1rem;
    height: 0.4rem;
    border:1px solid #ccc;
    float: left; 
    text-align: center;
    border-radius: 20%;
    line-height: 0.4rem;
    margin-top: 2rem;
}
.SSZZ .S3SY{
    margin-left: 0.7rem;
    width: 1rem;
    height: 0.4rem;
    border:1px solid #ccc;
    float: left; 
    text-align: center;
    border-radius: 20%;
    line-height: 0.4rem;
    margin-top: 2rem;
}

.SSZZ header,footer{
    height:0.8rem; 
}
.SSZZ section{
    flex:1;
    overflow:auto;
}



</style>


